Column
Description
As the name already implies, this property treats any column related properties and can be found in Detail Panel. It basically controls yTable columns and their individual properties, to make each column customizable.
| Feature | Value |
|---|---|
| Theme injectable | - |
| Possible Inputs | A-Z, a-z, 0-9, Special characters |
Column Ingredients
field
This represents the actual designation of the column.
type
As the name implies, this is the type of the column and indicates which values are stored. @Note link to entity properties?
nullable
This controls, whether the column values can be null.
This also depends on the type of the column. Only specific types can be nullable.
displayEditDialog
This property controls, how the value gets displayed inside the dialog. It can be set to:
checkbox number text date toggle textarea
E.g. you could display a boolean as a checkbox or an text.
displayTable
It controls how the values get visualized. It can be set to:
checkbox number text image link phone mail date time
E.g. you could display an image url as the url itself or as an image.
sort
As the name implies, this controls how the records inside a column get sorted.
filter
This controls if the column can be filtered individually by the user.
label
This represents the actual label of the column which is printed inside the column header.
name
This property represents the name of the certain column under which it can be found.
visible
This controls, whether the column is displayed or not.
sticky
Makes the column sticky, so that when scrolling the column doesn't disappear and stays on top.
orderId
Controls the order of the columns in numeric order.
bodyCell minWidth
The minimum value for the width of the column. This can be set in:
px pt em vw vh %
bodyCell maxWidth
The maximum value for the width of the component. This can be set in:
px pt em vw vh % none
bodyCell fontAlignHorizontal
The font align of the text on the x-axis. This can be set in:
left center right
bodyCell fontAlignVertical
The font align of the text on the y-axis. This can be set in:
top middle bottom
bodyCell fontSize
The font size of the text. This can be set in:
cm mm in px em ex ch rem
bodyCell fontWeight
With the font weight of the text inside a column cell, you can choose how bold your font should be. Normally font weight is set in steps of 100. 100 is very thin, 900 very thick. The normal font weight is 400.
bodyCell fontColor
The color of the text inside a cell of the column. This can be set as a color from a palette or a custom hex color.
bodyCell bgColor
This property controls the background color of the cells inside the column.
columnHeader fontAlignHorizontal
The font align of the text on the x-axis. This can be set in:
left center right
columnHeader fontAlignVertical
The font align of the text on the y-axis. This can be set in:
top middle bottom
columnHeader fontSize
The font size of the text. This can be set in:
cm mm in px em ex ch rem
columnHeader fontWeight
With the font weight of the text inside the column header, you can choose how bold your font should be. Normally font weight is set in steps of 100. 100 is very thin, 900 very thick. The normal font weight is 400.
columnHeader fontColor
The color of the text inside the column header. This can be set as a color from a palette or a custom hex color.
columnHeader bgColor
This property controls the background color of the column itself and only colorizes the column header.
Occurences
Detail Panel
Inside the Detail Panel the properties of single columns can be adjusted to individualize them.
@Note insert image here
The properties are grouped and filtered by the current state, which means you can also modify properties which are related to states e.g. hovering over a column.
- Generic
Includes general information e.g. label or sticky and the sizing of the selected column. - Column Header
This allows the manipulation of the column header styling wise. - Column
Includes styling properties for the column content, which allows seperate styling from the header.